<template>
	<div class="shopcar">
		<h3>购物车</h3>
		<div class="clears">
			<div class="clearcar" @click="delAllShop()">清空购物车</div>
		</div>
		
		<div v-if="JSON.stringify(this.carts) !='{}'" class="contents">
			<van-swipe-cell v-for=" (value,key,index) in carts" :key="index">
				<div class="conItem">
					<div class="img1">
						<img :src="value.goods.image1" />
					</div>
					<div class="mid">
						<p>{{value.goods.name}}</p>
						<div class="mybtn">
							<button @click="handelClick(true,value.goods.ID)">+</button>
							<input type="" :value="value.count" />
							<button @click="handelClick(false,value.goods.ID)">-</button>
						</div>

					</div>
					<div class="rig">
						<p>{{value.goods.presentPrice|rmb}}</p>
						<p>✖{{value.count}}</p>
						<p class="rigred">{{(value.goods.presentPrice*value.count).toFixed(2)|rmb}}</p>
					</div>
				</div>
				<template #right>
					<van-button @click="delClick(value.goods.ID)" square text="删除" type="danger" class="delete-button" />
				</template>
			</van-swipe-cell>
		</div>
		<div class="contents11"  v-else>您的购物车已清空,请加购商品</div>
		<div class="ObuttomOut">
			<div class="Obuttom">
				<p>商品总价: <span>{{total | rmb}}</span></p>
			</div>
		</div>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				values: 1,
				carts: {},
				total: ""
			};
		},
		methods: {
			myshopcar() {
				this.$store.dispatch("viewCart")
				this.carts = this.$store.state.carts
				console.log(this.carts)
			},
			getTotalPrice() {
				let price = 0;
				for (var i in this.carts) {
					// console.log(this.carts[i].count)
					// console.log(this.carts[i].goods.presentPrice)
					price += this.carts[i].count * this.carts[i].goods.presentPrice
				}
				this.total = price.toFixed(2)
			},
			handelClick(bool, index) {
				let shopIndex = this.carts[index]
				if (bool) {
					shopIndex.count++

				} else {
					if (shopIndex.count <= 1) {
						alert("购买数量不能小于1")
						shopIndex.count = 1
					} else {
						shopIndex.count--
					}

				}
				this.$store.dispatch("toshopcarNum")
				this.getTotalPrice()
			},
			delClick(index){
				delete this.$store.state.carts[index]
				this.$store.dispatch("toshopcarNum")
				this.getTotalPrice()
			},
			delAllShop(){
				for(let i in this.$store.state.carts){
					delete this.$store.state.carts[i]
				}
				this.$store.dispatch("toshopcarNum")
				this.getTotalPrice()
			}
		},
		mounted() {
			this.myshopcar()
			this.getTotalPrice()
		}
	}
</script>
<style lang="scss">
	.shopcar {
		h3 {
			position: fixed;
			top: 0;
			background-color: #fff;
			width: 100%;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			font-weight: 600;
			text-align: center;
			border-bottom: 1px solid #ccc;
			z-index: 999;

		}

		.clears {
			position: fixed;
			top: 40px;
			background-color: #fff;
			width: 100%;
			height: 52px;
			border-bottom: 1px solid #ccc;
			z-index: 999;

			.clearcar {
				float: right;
				width: 100px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				color: white;
				font-size: 16px;
				background-color: red;
				border-radius: 5px;
				padding: 5px;
				margin: 5px 5px 5px 0;

			}
		}

		.contents {
			width: 375px;
			height: 100%;
			margin: 92px auto 80px;

			.conItem {
				width: 375px;
				height: 110px;
				display: flex;
				margin: 5px auto;
				border-bottom: 1px solid #ccc;


				.img1 {

					width: 100px;
					height: 100px;
					margin-left: 5px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.mid {
					width: 200px;
					height: 100px;
					font-size: 17px;
					margin: 15px 0 0 15px;

					p {
						width: 190px;
						height: 30px;
						margin-bottom: 15px;
						word-wrap: break-word;
						word-break: break-all;
					}

					.mybtn {
						button {
							width: 31px;
							height: 25px;
							background-color: #e0e0e0;
							color: #58595b;
							border: none;
							outline: none;
						}

						input {
							width: 37px;
							height: 25px;
							background-color: #fff;
							border: none;
							text-align: center;

						}

					}
				}

				.rig {
					font-size: 17px;
					margin: 15px 10px 0 0;
					height: 100px;
					line-height: 25px;
					text-align: right;

					.rigred {
						color: red;
					}
				}
			}

			.delete-button {
				height: 100%;
			}
		}
		.contents11{
			width: 375px;
			height: 100%;
			text-align: center;
			margin: 92px auto 80px;
			font-size: 20px;
		}

		.ObuttomOut {
			width: 400px;
			height: 30px;
			position: fixed;
			bottom: 45px;
			// left: 200px;
			background-color: #fff;

			.Obuttom {
				height: 100%;
				width: 200px;

				font-size: 20px;
				font-weight: 600;
			}
		}
	}
</style>
